<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS z-index 属性和 position 的关系</title>
<style>
<!--

body{margin:0;padding:20px;font-size:12px;font-family:tahoma;}
h1{padding:10px 0;margin:0;font-size:24px;font-weight:normal;color:#66F;}
h2{padding:30px 0 10px;margin:0;font-size:18px;font-weight:normal;color:#080;}
table{border-collapse:collapse;font-size:11px;}
th,td{padding:5px 10px;border:1px solid #999;text-align:left;vertical-align:top;}
th{width:150px;font-weight:normal;font-family:"courier new",courier,monospace;background:#FFC;}
th strong{font-size:12px;font-family:tahoma;}
iframe{width:175px;height:150px;}

-->
</style>
</head>
<body>

<h1>position 属性和 z-index 属性对页面节点层级影响的例子</h1>

该页面的内容是对文章《<a href="http://www.neoease.com/z-index-property-and-layering-tree/">CSS z-index 使用方法和层级树</a>》的补充, 举例说明 position 属性和 z-index 属性对页面节点层级影响.

<h2>不设 z-index 属性</h2>

<table>
<tbody>

<tr>
<th><strong>例 1.1</strong><br /><br />A{}<br /><br />B{}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.1.html" ></iframe></td>

<th><strong>例 1.2</strong><br /><br />A{<br />&nbsp;&nbsp;position:static;<br />}<br /><br />B{}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.2.html"></iframe></td>

<th><strong>例 1.3</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />}<br /><br />B{}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.3.html"></iframe></td>
</tr>

<tr>
<th><strong>例 1.4</strong><br /><br />A{<br />&nbsp;&nbsp;position:absolute;<br />}<br /><br />B{}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.4.html"></iframe></td>

<th><strong>例 1.5</strong><br /><br />A{<br />&nbsp;&nbsp;position:eixed;<br />}<br /><br />B{}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.5.html"></iframe></td>

<th><strong>例 1.6</strong><br /><br />A{}<br /><br />B{}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />}</th>
<td><iframe frameborder="0" marginwidth="0" marginheight="0" src="1.6.html"></iframe></td>
</tr>

</tbody>
</table>

<h2>单层节点</h2>

<table>
<tbody>

<tr>
<th><strong>例 2.1</strong><br /><br />A{<br />&nbsp;&nbsp;z-index:2;<br />}<br /><br />B{<br />&nbsp;&nbsp;z-index:1;<br />}<br /><br />C{<br />&nbsp;&nbsp;z-index:0;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="2.1.html" ></iframe></td>

<th><strong>例 2.2</strong><br /><br />A{<br />&nbsp;&nbsp;z-index:2;<br />}<br /><br />B{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}<br /><br />C{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="2.2.html" ></iframe></td>

<th><strong>例 2.3</strong><br /><br />A{<br />&nbsp;&nbsp;z-index:1;<br />}<br /><br />B{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />C{<br />&nbsp;&nbsp;position:relative;<br />}<br /><br />D{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="2.3.html" ></iframe></td>
</tr>

</tbody>
</table>

<h2>双层节点</h2>

<table>
<tbody>

<tr>
<th><strong>例 3.1</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}<br /><br />A-1{}<br /><br />B{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />B-1{}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="3.1.html" ></iframe></td>

<th><strong>例 3.2</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:2;<br />}<br /><br />B{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />B-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="3.2.html" ></iframe></td>

<th><strong>例 3.3</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:2;<br />}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />B{}<br /><br />B-1{<br />&nbsp;&nbsp;position:relative;<br />z-index:1;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="3.3.html" ></iframe></td>
</tr>

</tbody>
</table>

<h2>多层节点</h2>

<table>
<tbody>

<tr>
<th><strong>例 4.1</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:100;<br />}<br /><br />B-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />B-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:10;<br />}<br /><br />C-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />C-1-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="4.1.html" ></iframe></td>

<th><strong>例 4.2</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:100;<br />}<br /><br />B-1{<br />&nbsp;&nbsp;position:relative;<br />}<br /><br />B-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:10;<br />}<br /><br />C-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />C-1-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="4.2.html" ></iframe></td>

<th><strong>例 4.3</strong><br /><br />A{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />A-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:100;<br />}<br /><br />B-1{}<br /><br />B-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:10;<br />}<br /><br />C-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:0;<br />}<br /><br />C-1-1-1{<br />&nbsp;&nbsp;position:relative;<br />&nbsp;&nbsp;z-index:1;<br />}</th>
<td><iframe style="height:200px" frameborder="0" marginwidth="0" marginheight="0" src="4.3.html" ></iframe></td>
</tr>

</tbody>
</table>

</body>
</html>
